<template>
  <div id="dashboard" v-if="homeData">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="chart-item">
          <doughnut-chart
            width="70%"
            :color="['#ffac48', '#f3f3f3']"
            text-color="#ffac48"
            height="180px"
            :title="homeData.paper.normal | formatterNumber"
            series-name="试题数量"
            :data="getDoughnutCharData('paper')"
          >
          </doughnut-chart>
          <div class="info">
            <p class="title">总试卷数</p>
            <p class="total">
              <number-tooltip
                text-color="#ffac48"
                :number="homeData.paper.total"
              ></number-tooltip>
            </p>
            <div class="detail">
              <div>
                开放：<number-tooltip
                  :number="homeData.paper.normal"
                ></number-tooltip>
              </div>
              <div>
                锁定：<number-tooltip
                  :number="homeData.paper.unnormal"
                ></number-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-item">
          <doughnut-chart
            width="70%"
            height="180px"
            :color="['#409eff', '#f3f3f3']"
            text-color="#409eff"
            :title="homeData.student.normal | formatterNumber"
            series-name="学生数量"
            :data="getDoughnutCharData('student')"
          >
          </doughnut-chart>
          <div class="info">
            <p class="title">学生数量</p>
            <p class="total">
              <number-tooltip
                text-color="#409eff"
                :number="homeData.student.total"
              ></number-tooltip>
            </p>
            <div class="detail">
              <div>
                开放：
                <number-tooltip
                  :number="homeData.student.normal"
                ></number-tooltip>
              </div>
              <div>
                锁定：
                <number-tooltip
                  :number="homeData.student.unnormal"
                ></number-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-item">
          <doughnut-chart
            width="70%"
            height="180px"
            :color="['#797cf8', '#f3f3f3']"
            text-color="#797cf8"
            :title="homeData.question.normal | formatterNumber"
            series-name="题目数量"
            :data="getDoughnutCharData('question')"
          >
          </doughnut-chart>
          <div class="info">
            <p class="title">总题目数</p>
            <p class="total">
              <number-tooltip
                text-color="#797cf8"
                :number="homeData.question.total"
              ></number-tooltip>
            </p>
            <div class="detail">
              <div>
                开放：
                <number-tooltip
                  :number="homeData.question.normal"
                ></number-tooltip>
              </div>
              <div>
                锁定：
                <number-tooltip
                  :number="homeData.question.unnormal"
                ></number-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-item">
          <doughnut-chart
            width="70%"
            height="180px"
            :color="['#42b983', '#f3f3f3']"
            text-color="#42b983"
            :title="homeData.source.normal | formatterNumber"
            series-name="课件数量"
            :data="getDoughnutCharData('source')"
          >
          </doughnut-chart>
          <div class="info">
            <p class="title">课件数量</p>
            <p class="total">
              <number-tooltip
                text-color="#42b983"
                :number="homeData.source.total"
              ></number-tooltip>
            </p>
            <div class="detail">
              <div>
                开放：
                <number-tooltip
                  :number="homeData.source.normal"
                ></number-tooltip>
              </div>
              <div>
                锁定：
                <number-tooltip
                  :number="homeData.source.unnormal"
                ></number-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="chart-item">
          <recent-exam-result
            :recent-exam="homeData.lastExamForChart"
          ></recent-exam-result>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-item">
          <question-type :question-info="homeData.queTypeRatio"></question-type>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="title" style="margin-bottom: 20px">最近考试</div>
        <div
          class="item"
          v-for="(item, index) in homeData.lastExam"
          :key="index"
        >
          <div class="left">
            <p class="name">{{ item.examname }}</p>
            <p class="time">
              {{ item.starttime | formatterDate }}-{{
                item.endtime | formatterDate
              }}
            </p>
          </div>
          <div class="right">
            <p class="type">普通试卷</p>
            <p class="score">100分</p>
            <p class="count">{{ item.count }}</p>
            <el-progress :percentage="100"></el-progress>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="title" style="margin-bottom: 20px;">新闻公告</div>
        <div
          class="item"
          style="flex-direction: column;justify-content: space-between"
          v-for="(item, index) in homeData.lastSysNotice"
          :key="index"
        >
          <p class="name">{{ item.name }}</p>
          <p class="time">{{ item.createtime | formatterDate }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DoughnutChart from "./components/DoughnutChart";
import NumberTooltip from "@/components/NumberTooltip";
import RecentExamResult from "./components/RecentExamResult";
import QuestionType from "./components/QuestionType";
export default {
  name: "index",
  components: {
    QuestionType,
    RecentExamResult,
    NumberTooltip,
    DoughnutChart
  },
  data() {
    return {
      homeData: null
    };
  },
  created() {
    this.axios.get("/sys/home/GetPaperCount").then(res => {
      this.homeData = res;
    });
  },
  computed: {
    paper() {
      return [
        { value: this.homeData.paper.normal, name: "开放" },
        { value: this.homeData.paper.unnormal, name: "关闭" }
      ];
    },
    student() {
      return [
        { value: this.homeData.student.normal, name: "开放" },
        { value: this.homeData.student.unnormal, name: "锁定" }
      ];
    },
    question() {
      return [
        { value: this.homeData.question.normal, name: "开放" },
        { value: this.homeData.question.unnormal, name: "锁定" }
      ];
    }
  },
  methods: {
    getDoughnutCharData(key) {
      return [
        { value: this.homeData[key].normal, name: "开放" },
        { value: this.homeData[key].unnormal, name: "锁定" }
      ];
    }
  }
};
</script>

<style scoped>
.el-progress {
  width: 100%;
}
.el-row {
  margin-bottom: 20px;
}
#dashboard {
  background: #f2f2f2;
}
.chart-item {
  background: white;
}

.chart-item {
  display: flex;
  align-items: center;
  padding: 20px;
}
.chart-item .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.total {
  font-size: 36px;
  color: #6ccac9;
}
.title {
  font-size: 18px;
}
.detail {
  font-size: 14px;
  line-height: 20px;
}
.item {
  display: flex;
  height: 100px;
  padding: 20px;
  background: white;
  margin-bottom: 10px;
}
.item .left {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.item .right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;

  font-size: 14px;
}
.name {
  font-size: 17px;
  letter-spacing: 0.3px;
  color: #34474f;
}
.time {
  font-size: 13px;
  color: #738f9d;
}
.type {
  flex: 1;
  text-align: center;
}
.count,
.score {
  flex: 1;
  text-align: center;
}
.el-progress {
  flex: 2;
}
</style>
